<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div class="nav">
            首页 / 联盟伙伴
          </div>
          <div class="text-center mb-3" style="font-size: 36px;font-weight: 500;color: #000000;line-height: 50px;letter-spacing: 2px;">联盟伙伴</div>
          <div>
            <div v-for="(item, index) in unions" :key="index">
              <div style="height: 25px;font-size: 18px;font-family: PingFangHK-Medium, PingFangHK;font-weight: 600;color: #FE7743;line-height: 25px;letter-spacing: 1px;">
                {{ item.name }}
              </div>
              <div class="flex" style="width:850px;padding:45px 0;flex-wrap: wrap;">
                <div v-for="(citem, cindex) in item.lianmeng" :key="cindex" style="margin-right:50px;margin-bottom:30px;cursor: pointer;" @click="navToUrl(citem)">
                  <div>
                    <img :src="citem.pictureurl" style="width:120px;height:60px;" />
                  </div>
                  <div style="text-align:center;margin-top:13px;font-size: 12px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #000000;line-height: 17px;">{{ citem.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchLianmengList } from "@/api/lianmeng"
import NavBar from "@/components/NavBar.vue"

export default {
	name: 'UnionView',
  components: {
    NavBar
  },
  data() {
    return {
      unions: {}
    }
  },
  created() {
    fetchLianmengList(1).then(response => {
      console.info(response.data)
      this.unions = response.data
    })
  },
  methods: {
    navToUrl(item) {
      window.open(item.linkurl, '_blank')
    }
  }
}
</script>

<style lang="scss">
.main .nav {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #A4A8AF;
  margin-top: 0.8125rem;
}
</style>